<%--
功能: tag选择器
--%>
<%@ tag body-content="scriptless"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="other" tagdir="/WEB-INF/tags/other"%>
<%@ taglib prefix="probiz" tagdir="/WEB-INF/tags/probiz"%>
<%@ taglib prefix="common" tagdir="/WEB-INF/tags/common"%>
<%@ tag import="org.springframework.context.ApplicationContext" %>
<%@ tag import="org.springframework.web.context.support.WebApplicationContextUtils" %>
<%@ tag import="com.probiz.estore.other.service.TagManager" %>
<%@ tag import="com.probiz.estore.common.model.other.Tag" %>
<%@ tag import="java.util.List" %>
<%@ attribute name="module"  rtexprvalue="true" type="java.lang.Short" description="模块id"%>
<%@ attribute name="selectorId" required="true" rtexprvalue="true" type="java.lang.String" description="selector id"%>
<%@ attribute name="applyCallbackFunc" required="true" rtexprvalue="true" type="java.lang.String" description="应用标签回调函数,一般用于设置值并刷新页面"%>
<%@ attribute name="manageCallbackFunc" required="true" rtexprvalue="true" type="java.lang.String" description="管理回调函数，一般用于刷新页面"%>
<%@ attribute name="left" required="false" rtexprvalue="true" type="java.lang.Integer" description="弹出框style left的数值"%>
<%
	ApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(session.getServletContext());
	TagManager tagManager = (TagManager) ctx.getBean("tagManager");
	List<Tag> tagList = tagManager.listByProperty("module", module);
	request.setAttribute("tagList",tagList);
	
%>
<div class="tag_wrap">
	<span class="btn_arr_down" onclick="${selectorId}ShowTagWindow()"><b class="ico_tag"></b><fmt:message key="tagSelector.button.show"/></span>
	<div id="${selectorId}TagShow" class="drop_wrap" style="display:hidden; left:${(not empty left)?left:'0'}px; top:23px;">
		<span class="close" onclick="${selectorId}CloseTagWindow()">&nbsp;</span>
		<b><fmt:message key="tagSelector.tip.1"/>:</b><fmt:message key="tagSelector.tip.2"/><br />
		<textarea name="${selectorId}TagInput"  id="${selectorId}TagInput"  cols="" rows="5" style="width:265px"></textarea><br />
		<b><fmt:message key="tagSelector.tip.3"/>:</b>
		<div class="tag_editor" id="${selectorId}TagChooser">
			<c:forEach items="${tagList}" var="tag">
				<common:htmlEscape value="${tag.tagName}" returnValue="returnTagName"/>
				<span onclick="${selectorId}ToggleTag(this)" tagName="${returnTagName}" title="${returnTagName}">
					<common:displayString value="${tag.tagName}" length="5"/>
					<input type="hidden" name="tagName" value="${returnTagName}">
				</span>
			</c:forEach>
		</div>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td>
					<input name="" type="button" class="b1" value="<fmt:message key="tagSelector.button.apply"/>" onclick="${selectorId}ApplyTag()"/>
				</td>
				<td align="right">
					<input name="" type="button" class="b2" value="<fmt:message key="tagSelector.button.define"/>" onclick="showDialogOf${selectorId}()"/>
				</td>
			</tr>
		</table>
	</div>
</div>	

<script type="text/javascript">
$j(document).ready(function () {
	__FMTExtend = {
		tagDetail_inputTagName:"<fmt:message key="tagDetail.inputTagName"/>",
		tagDetail_tagName_notNull:"<fmt:message key="tagDetail.tagName.notNull"/>",
		tagDetail_tagName_tooLong:"<fmt:message key="tagDetail.tagName.tooLong"/>",
		tagDetail_addTag:"<fmt:message key="tagDetail.addTag"/>",
		tagDetail_rename:"<fmt:message key="tagDetail.rename"/>",
		tagDetail_delete:"<fmt:message key="tagDetail.delete"/>",
		tagDetail_delete_confirm:"<fmt:message key="tagDetail.delete.confirm"/>",
		tagDetail_exceedMaxLength:"<fmt:message key="tagDetail.exceedMaxLength"/>",
		tagDetail_exceedMaxCount:"<fmt:message key="tagDetail.exceedMaxCount"/>"
	};
	$j.extend(__FMT, __FMTExtend); 
});	

var ${selectorId}ApplyCallbackFunc;
var ${selectorId}ManageCallbackFunc;
$j(document).ready(function(){
	${selectorId}ApplyCallbackFunc = eval(${applyCallbackFunc});
	${selectorId}ManageCallbackFunc = eval(${manageCallbackFunc});
});
 
//切换tag选择框
function ${selectorId}ToggleTag(linkDOM){
	var tagName = $j(linkDOM).find("input[name=tagName]").val();
	var jInput = $j('#${selectorId}TagInput');
	if($j(linkDOM).hasClass("curr")){
		var strs = jInput.val().trim().split(" ");
		var newStr = "";
		for(var i=0; i<strs.length; i++){
			if(strs[i].trim() != tagName){
				newStr += strs[i].trim()+" ";
			}
		}
		jInput.val(newStr);
		$j(linkDOM).removeClass("curr");
	}else{
		jInput.val((jInput.val()+" "+tagName).trim());
		$j(linkDOM).addClass("curr");
	}	
}
//关闭标签窗口
function ${selectorId}CloseTagWindow(){
	$j('#${selectorId}TagShow').hide();
}

//开启标签窗口
function ${selectorId}ShowTagWindow(linkDOM){
	var jTagShow = $j('#${selectorId}TagShow');
	jTagShow.show();
	${selectorId}ShowTag();
}
//应用tag
function ${selectorId}ApplyTag(){
	var tagNames = $j('#${selectorId}TagInput').val().trim();
	//start:检查长度和个数
	var strArray = tagNames.split(" "); 
	if(strArray.length > 20){
		jAlert(__FMT.tagDetail_exceedMaxCount);
		return false;
	}
	for(var i=0; i<strArray.length; i++){
		var strValue = strArray[i].trim();
		if(strValue.length > 30){
			jAlert("["+strValue+"] <span class='red'>"+__FMT.tagDetail_exceedMaxLength+"</span>");
			return false;
		}
	}
	//end:检查长度和个数
	
	var flag = ${selectorId}ApplyCallbackFunc.call(this,tagNames);
	if(flag){
		//如果已经勾选，则重置并关闭
		${selectorId}ResetTag();
		//${selectorId}CloseTagWindow();
		//${selectorId}RefreshTagChooser(); //请在ApplyCallbackFunc调用之后在自定义代码中调用，否则有时间差问题
	}	
}
//重置tag
function ${selectorId}ResetTag(){
	var jInput = $j('#${selectorId}TagInput');
	jInput.val("");
	$j('#${selectorId}TagChooser span.curr').removeClass("curr");
}
//显示tag 如果选择
function ${selectorId}ShowTag(){
	${selectorId}ResetTag();
	
	//start:从选择的checkbox中找到唯一一个相同的tag
	var jChecks = $j('input:checked[name=multiIds]');
	if(jChecks.length == 0)return;
	var str = $j(jChecks[0]).attr("tags");
	if(str == "")return;
	var flag = true;
	jChecks.each(function(i,o){
		var jCheck = $j(o);
		if(jCheck.attr("tags")!= str){
			flag = false;
			return;
		}
	});
	//end:从选择的checkbox中找到唯一一个相同的tag
	if(flag){
		//设置textarea
		$j('#${selectorId}TagInput').val(" "+str);
		//设置tagChooser
		var strArray = $j('#${selectorId}TagInput').val().trim().split(" "); 
		$j('#${selectorId}TagChooser span').each(function(i,o){
			if(strArray.isContainValue($j(o).attr("title"))){
				$j(o).addClass("curr");
			}
		});
	}	
	 
	
}
//重新定义以后 更新chooser
function ${selectorId}RefreshTagChooser(){
	$j('#${selectorId}TagChooser').loading().load(__ctxPath+'/other/tagSelector/blank.html?doAction=refreshTagChooser&selectorId=${selectorId}&module=${module}',null,${selectorId}RefreshTagChooserCallback);
}
//重新定义以后 更新chooser callback
function ${selectorId}RefreshTagChooserCallback(){
	var str = $j('#${selectorId}TagInput').val();
	$j('#${selectorId}TagChooser span').each(function(i,o){
		if(str.indexOf($j(o).html())!=-1){
			$j(o).addClass("curr");
		}
	});
}

Array.prototype.isContainValue=function(val)
 {
   if(val == ""){return false;}
   for(var i=0,n=0;i<this.length;i++)
   {
       if(this[i].trim()==val){
       	return true;
       }
   }
   return false;
 }
</script>

<other:tagDefiner module="${module}" selectorId="${selectorId}" callbackFunc="${selectorId}ManageCallbackFunc"/>